<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>凑单品</title>
    <!-- 公共样式 -->
    <link rel="stylesheet" href="../../css/base.css">
    <!-- 公共媒体文件 -->
    <link rel="stylesheet" href="../../css/media.css">
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../../css/iconfont.css">
    <link rel="stylesheet" href=" ">
    <!-- 当前文件样式 -->
    <link rel="stylesheet" href="../../css/shop.css">
    <script type='text/javascript' src='../../lib/zepto/zepto.min.js'></script>
    <script type='text/javascript' src='../../lib/template/template.js'></script>
</head>

<body>
    <!-- 顶部 -->
    <div class="top">
        <header>
            <!-- 返回上一页 -->
            <a href="../../index.html" class="go-back">
                <span class="iconfont icon-fanhui"></span>
            </a>
            <!-- 标题 -->
            <div class="title">凑单品</div>
            <!-- <span>头部</span> -->
            <a href="javascript:;">
                <img src="../../images/header_app.png" alt="">
            </a>
        </header>
    </div>
    <!-- 筛选 -->
    <div class="search iconfont">
        <ul class="selector">
            <li data-id="0" data-type='shop'>京东<span class="icon-shangsanjiao"></spanc>
            </li>
            <li data-id="1" data-type='area'>华东<span class="icon-shangsanjiao"></span></li>
            <li>全部价格 <span class="icon-shangsanjiao"></span></li>
        </ul>
        <div class="btn-search">
            <div class="iconfont icon-sousuo"></div>
        </div>
    </div>
    <!-- 下拉列表 -->
    <div class="search-select iconfont">

    </div>
    <!-- 商品列表 -->
    <div class="shop-list">

    </div>
    <!-- 底部 -->
    <footer>
        <div class="foot_tool">
            <a href="javascript:;">登录</a>
            <a href="javascript:;">注册</a>
            <a href="#">返回顶部</a>
        </div>
        <div class="foot_content">
            <a href="javascript:;">手机APP下载
                <span>慢慢买手机版</span>
            </a>
            <span>--掌上比价平台</span>
            <p>m.manmanbuy.com</p>

        </div>
    </footer>
</body>
<!-- 店铺模板  -->
<script type='text/template' id="shopTmp">
    <ul>
        {{each result as val key}}
            <li class="select-retult" data-id="{{val.shopId}}" data-type='shop'>{{val.shopName}} {{if val.shopId == result.id}}<span class="icon-hook check"></span>{{/if}}</li>
        {{/each}}
    </ul>
</script>

<!-- 地区模板 -->
<script type='text/template' id="areaTmp">
    <ul>
        {{each result as val key}}
            <li class="select-retult" data-id="{{val.areaId}}" data-type='area'>{{val.areaName}} {{if val.areaId == result.id}}<span class="icon-hook check"></span>{{/if}}</li>
        {{/each}}
    </ul>
</script>

<!-- 商品信息 -->
<script type='text/template' id="goodTmp">
    <ul>
        {{each result as val key}}
            <li>
                <a href="javascript:;">
                    <div class="img">
                        <img src="{{val.productImg}}" alt="">
                    </div>
                    <div class="content clearfix">
                        <p>{{val.productName}}</p>
                        <span class='price'>{{val.productPrice}}</span>
                        <span class='price'>去凑单</span>
                    </div>
                </a>
            </li>
        {{/each}}
    </ul>
</script>
<script type='text/javascript'>
    //返回上一页
    $('.go-back').tap(function () {
        window.history.go(-1);
    });
    //选择的类型
    var type;
    /*获取下拉框的信息*/
    $('.search').on('tap', 'li', function () {
        var self = $(this);
        //当前选中的ID
        var id = $(this).attr('data-id');
        //获取下拉框的类型
        type = $(this).attr('data-type');

        //下拉列表开关
        if ($(this).children().hasClass('icon-arrLeft-fill')) {
            $('.search-select').hide();
            $(this).children().attr('class', 'icon-shangsanjiao')
            return;
        }
        if (type) {
            //请求的地址
            var url = type == 'shop' ? 'http://193.112.55.79:9090/api/getgsshop' :
                'http://193.112.55.79:9090/api/getgsshoparea';
            //需要渲染的模板id
            var tmpId = type == 'shop' ? 'shopTmp' : 'areaTmp';
            $.get(url, function (res) {
                res.result.id = id;
                //下拉框选中的元素
                self.children().attr('class', 'icon-arrLeft-fill').parent().siblings().children().attr(
                    'class', 'icon-shangsanjiao');
                var html = template(tmpId, res);

                $('.search-select').show().html(html);

            }, 'json');
        }
    })

    //把选中的下拉框选项赋值到页面
    $('.search-select').on('tap', '.select-retult', function () {
        //筛选下标
        var index = type == 'shop' ? 0 : 1;
        //筛选的类型
        var search_type = type == 'shop' ? 'shop' : 'area';
        //当前的文本内容
        var text = type == 'shop' ? $(this).text() : $(this).text().substr(0, 2);
        //赋值
        $('.selector').children().eq(index).replaceWith('<li data-id="' + $(this).attr('data-id') +
            '" data-type="' + search_type + '"> ' + text + ' <span class="icon-shangsanjiao"></spanc></li>'
        );
        //隐藏选项框
        $('.search-select').hide();
    });

    /**
     * @method 获取商品数据
     * @param  [int] shopid [店铺id]
     * @param  [int] areaid [地区id]
     */
    function getGoods(shopid, areaid) {
        shopid = shopid || 1;
        areaid = areaid || 0;
        $.get('http://193.112.55.79:9090/api/getgsproduct', {
            shopid: shopid,
            areaid: areaid
        }, function (res) {
            var html = template('goodTmp', res);

            $('.shop-list').html(html);
        }, 'json');
    }
    getGoods();

    //筛选数据
    $('.btn-search').on('tap', function () {
        //店铺id
        var shopId = $('.selector').children().eq(0).attr('data-id')
        //地区ID 
        var areaId = $('.selector').children().eq(1).attr('data-id');
        //获取数据
        getGoods(shopId, areaId);
    });
</script>

</html>